<template>
  <view class="container">
    <!-- 搜索按钮 -->
    <view class="search-btn">
      <button type="default">搜索</button>
    </view>

    <!-- 使用v-for渲染列表项 -->
    <view class="item" v-for="(item, index) in listData" :key="index">
      <view class="item-row" v-for="(value, key) in item" :key="key">
        {{ key }}：{{ value }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 列表数据
      listData: [
        {
          "账号": "18408246666",
          "生产主体": "六六六生产主体",
          "法人名称": "六六六",
          "主体地址": "众创空间",
          "食用农产品名称": "白菜",
          "重量(数量)": "100公斤",
          "合格方式": "委托检测,自我承诺",
          "开具时间": "2023-08-08 11:41:05"
        },
        {
          "账号": "18408246666",
          "生产主体": "六六六生产主体",
          "法人名称": "六六六",
          "主体地址": "众创空间",
          "食用农产品名称": "白菜",
          "重量(数量)": "100公斤",
          "合格方式": "委托检测,自我承诺",
          "开具时间": "2023-08-08 11:41:05"
        },
        {
          "账号": "18408246666",
          "生产主体": "六六六生产主体",
          "法人名称": "六六六",
          "主体地址": "众创空间",
          "食用农产品名称": "白菜"
        }
      ]
    };
  }
};
</script>

<style>
.container {
  padding: 10px;
  background-color: #f5f5f5;
}

.search-btn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
  padding: 0 5px;
}

.item {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.item-row {
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.item-row:last-child {
  border-bottom: none;
}
</style>
